<template lang="html">
  <div class="homepage">
    <v-toolbar absolute>
      <v-spacer></v-spacer>
      <v-toolbar-title v-html="title"></v-toolbar-title>
      <v-spacer></v-spacer>

      <a></a>
    </v-toolbar>
    <div fluid fill-height class="secondary-router-view" :style="{height: height}">
      <router-view keep-alive></router-view>
    </div>
    <v-bottom-nav
      :active.sync="bottomNav"
      :value="true"
      absolute
      color="transparent">
      <router-link class="tab-link" v-for="tab, index in tabsButton" :to="{ path: tab.url, params: {} }" @click.native="changeTitle(tab.text)">
        <v-btn color="#006cc6" flat :value="index">
          <span>{{tab.text}}</span>
          <v-icon>{{tab.icon}}</v-icon>
        </v-btn>
      </router-link>
    </v-bottom-nav>
  </div>
</template>

<script>
export default {
  data() {
    return {
      title: "主页",
      tabsButton: [
        {text: "主页", icon: "fa-home", url: "/homepage"},
        {text: "个人中心", icon: "fa-user", url: "/profile"}
      ],
      height: "0px",
      bottomNav: 0
    }
  },
  mounted() {
    this.resize()
  },
  methods: {
    resize() {
      let windowHeight = window.getComputedStyle(document.querySelector('body')).height
      this.height = Number(windowHeight.replace('px', '')) - 56 - 56 + 'px'
    },
    changeTitle(title) {
      this.title = title
    },
    goback() {
      this.$router.go(-1)
    }
  }
}
</script>

<style lang="scss">
.homepage {
  height: 100%;
  position: relative;

  .v-toolbar__title {
    margin-left: 0;
  }

  .secondary-router-view {
    position: absolute;
    top: 56px;
    left: 0;
    right: 0;
    overflow: auto;

    &::-webkit-scrollbar {
      width: 0 !important;
    }
  }
  .v-bottom-nav {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;

    .tab-link {
      display: flex;
      flex-direction: row;
      justify-content: center;
      width: 50%;
    }
  }
}
</style>
